<template>
    <div>
        <div v-if="flag">
            <div>

                <div v-for="item in doctordata" :key="item.id">
                    <div class="lik">
                        <img :src="item.headPic" alt="" class="image">
                        <div class="ak">
                            {{ item.nickName }}
                        </div>
                    </div>
                    <div class="title">
                        {{ item.content }}
                    </div>
                </div>
            </div>
        </div>
            <div v-else>
                <h1 style="text-align: center;">评论数据为空</h1>
            </div>
        </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
const doctordata = ref([])
const route = useRoute()
const flag = ref(true);
const doctorId = route.params.doctorId
const getlist = () => {
    axios.get(`/health/user/inquiry/v1/findDoctorEvaluateList`,
        {
            params: {
                doctorId: doctorId,
                page: 1,
                count: 5
            }
        }
    ).then((res) => {
        console.log(res)
        doctordata.value = res.data.result;
        if (res.data.result.length == 0) {
            flag.value = false
        } else {
            flag.value = true
        }
    })

}
getlist();
</script>

<style scoped>
.image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-top: 5px;
    margin-left: 10px;
}
 .lik {
    display: flex;
}

.title {
    margin-left: 10px;
    font-size: 14px;
}

.ak {
    width: 100px;
    height: 50px;
    line-height: 55px;
    margin-left: 10x;
    font-size: 13px;
}

.lik {
    display: flex;
}

.title {
    margin-left: 10px;
    font-size: 14px;
    margin-top: 5px;
}

.ak {
    width: 100px;
    height: 50px;
    line-height: 55px;
    margin-left: 10x;
    font-size: 13px;
}

</style>
